<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MVVM</title>
    <script>
        // Model数据模型
        let msg = "Hello MVVM";

        // Model --> View
        window.onload = function(){
            let s1 = document.getElementById("s1");
            let inText = document.getElementById("inText");

            s1.innerHTML = msg;
            inText.value = msg;

            // View --> Model
            // 监听input输入的内容
            // 当文本框内容发生改变之后
            // 将对应的Model中的数据同步改变
            // Model发生变化之后,与之相关的View也会同步变化
            inText.oninput = function(){
                msg = this.value;
                console.log("当前Model的数据为:"+msg);
                s1.innerHTML = msg;
            }

        }

    </script>
</head>
<body>
<!-- View -->
<div id="d1">
    <span id="s1"></span><br/>
    <input type="text" id="inText"/>
</div>
</body>
</html>